<template>
  <div class="bgc-white" style="display: flex">
    <div class="p16" style="width: 260px; flex-shrink: 0">
      <div class="flex-center-between">
        <span class="fs16 fw500">企业服务分类</span>
        <span style="display: inline-block; cursor: pointer" @click="onAddGroupItem">
          <a-icon type="plus" />
        </span>
      </div>
      <div class="mt12">
        <a-input-search v-model="groupTerm" placeholder="搜索分类" style="width: 228px" allowClear />
      </div>
      <div class="mt16">
        <div class="pv8 ph12 pointer" :class="{ selected: currentGroup === '0' }" @click="currentGroup = '0'">全部分类</div>
        <template v-for="node in groupLst">
          <div
            v-if="node.productTypeName.includes(groupTerm)"
            :key="node.id"
            class="flex-center pv8 ph12 pointer"
            :class="{ selected: currentGroup === node.id }"
            @click="currentGroup = node.id"
          >
            <div class="ellipsis" style="width: 230px">{{ node.productTypeName }}</div>
            <a-icon type="setting" @click.stop="onEditGroupItem(node)" />
          </div>
        </template>
      </div>
    </div>
    <div class="pl16" style="flex: 1; border-left: 1px solid #e8e8e8; overflow: auto; min-height: calc(100vh - 112px)">
      <ProdList v-if="groupLst.length > 0" :productTypeId="currentGroup" :productTypeIdList="groupLst" />
      <div v-else class="flex-center-center" style="height: 100%">
        <a-empty :image="emptyImg">
          <template slot="description">
            <div class="mb12" style="color: rgba(159, 163, 176, 1)">抱歉，暂无产品数据</div>
            <a-button type="primary" @click="onAddGroupItem">添加分类</a-button>
          </template>
        </a-empty>
      </div>
    </div>
    <a-modal v-model="groupModalVisible" :title="groupModalTitle">
      <a-form :form="groupForm">
        <a-form-item label="分类名称" :labelCol="{ span: 7 }" :wrapperCol="{ span: 14 }">
          <a-input
            v-decorator="['productTypeName', { rules: [{ required: true, message: '必须填写名称' }] }]"
            placeholder="请输入"
            style="width: 100%"
          />
        </a-form-item>
      </a-form>
      <a-space slot="footer">
        <a-button @click="groupModalVisible = false">取消</a-button>
        <a-button v-if="groupModalTitle === '编辑分类'" type="danger" @click="onDelGroupItem">删除</a-button>
        <a-button :loading="confirmLoadingGroup" type="primary" @click="onGroupModalOk">提交</a-button>
      </a-space>
    </a-modal>
  </div>
</template>
<script>
import ProdList from "./list.vue";
export default {
  name: "",
  components: { ProdList },
  mixins: [],
  props: {},
  data() {
    return {
      groupModalTitle: "添加分组",
      groupModalVisible: false,
      groupForm: this.$form.createForm(this),
      groupLst: [],
      tempGroup: null,
      confirmLoadingGroup: false,
      groupTerm: "",
      currentGroup: "0",
      emptyImg: require("./empty.png")
    };
  },
  computed: {},
  watch: {},
  created() {
    this.onGroupSearchChange();
  },
  mounted() {},
  methods: {
    onGroupSearchChange() {
      this.$request({
        url: `/hr/api/v1/productTypes/selectBySite`
      })
        .then((res) => {
          this.groupLst = res.data;
          const idx = res.data.findIndex((item) => item.id === this.currentGroup);
          if (idx === -1) {
            this.currentGroup = "0";
          }
        })
        .catch((err) => {
          console.log("productTypes/selectBySite", err);
        });
    },
    onDelGroupItem() {
      this.$confirm({
        title: "删除确认",
        content: "分类删除后将无法恢复，确认要删除吗？",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/productTypes/${this.tempGroup.id}`,
            method: "delete"
          })
            .then(() => {
              this.$message.success("删除成功");
              this.onGroupSearchChange();
              this.groupModalVisible = false;
            })
            .catch((err) => {
              console.log("deleteGroupReq", err);
            });
        }
      });
    },
    onAddGroupItem() {
      this.groupForm.resetFields();
      this.groupModalTitle = "添加分类";
      this.tempGroup = null;
      this.groupModalVisible = true;
    },
    onEditGroupItem(target) {
      this.tempGroup = target;
      this.groupModalTitle = "编辑分类";
      this.groupModalVisible = true;
      setTimeout(() => {
        this.groupForm.setFieldsValue({
          productTypeName: target.productTypeName
        });
      }, 0);
    },
    onGroupModalOk() {
      this.groupForm.validateFields((err, values) => {
        if (!err) {
          const newValues = {
            productTypeName: values.productTypeName
          };
          this.confirmLoadingGroup = true;
          if (this.groupModalTitle === "添加分类") {
            this.$request({
              url: "/hr/api/v1/productTypes",
              method: "post",
              data: newValues
            })
              .then((res) => {
                this.$message.success("添加成功");
                this.onGroupSearchChange();
                this.groupModalVisible = false;
                this.confirmLoadingGroup = false;
              })
              .catch((err) => {
                this.confirmLoadingGroup = false;
                console.log("saveGroupReq", err);
              });
          } else {
            this.$request({
              url: "/hr/api/v1/productTypes",
              method: "put",
              data: {
                ...newValues,
                id: this.tempGroup.id
              }
            })
              .then((res) => {
                this.$message.success("修改成功");
                this.onGroupSearchChange();
                this.groupModalVisible = false;
                this.confirmLoadingGroup = false;
              })
              .catch((err) => {
                this.confirmLoadingGroup = false;
                console.log("updateGroupReq", err);
              });
          }
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.selected {
  background: var(--primary30);
  border-radius: 4px;
}
</style>
